<template>
    <div class="list">
        <div>
            <el-icon><Tickets /></el-icon>数据列表
        </div>
        <el-button @click="add">添加</el-button>
    </div>
    
    <el-table
    border
    ref="multipleTableRef"
    :data="list"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" align="center"></el-table-column>
        <el-table-column label="原因类型" prop="name" align="center"></el-table-column>
        <el-table-column label="排序" prop="sort" align="center"></el-table-column>
        <el-table-column label="是否可用" prop="status" align="center">
            <template #default="scope">
                <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="changeHandle(scope.row)"
                />
            </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="createTime" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-button @click="editHandle(scope.row.id)">编辑</el-button>
                <el-button @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="bottom">
        <div class="left">
            <el-form-item prop="keyword">
                <el-select v-model="operate" placeholder="批量操作">
                    <el-option label="删除" value="shanghai" />
                </el-select>
            </el-form-item>
            <el-button type="primary">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination
            v-model:currentPage="listParams.pageNum"
            v-model:page-size="listParams.pageSize"
            :page-sizes="[5,10,15]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChagne"
            @current-change="currentChange"
            />
        </ElConfigProvider>
    </div>
    <addEdit :show="show" @hide="hideDialog" @refresh="getData" :id="editId"></addEdit>
</template>

<script setup lang='ts'>
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Tickets } from '@element-plus/icons-vue'
import { reactive, ref, toRefs } from 'vue';
import { user } from '@/api';
import { fomatDate } from "@/utils";
import addEdit from './components/addEdit.vue'


interface IState {
    list: TReason[];
    listParams: IPage;
    total: number;
    operate: string;
}

const state = reactive<IState>({
    list: [], //表格数据
    listParams: {
        pageNum: 1,
        pageSize: 5,
    },
    total:0, //总条数
    operate: '' //批量操作下拉选择器
})

// 封装请求数据
const getData =()=>{
    user.returnReasonApi(state.listParams).then((res)=>{
        if(res.code === 200 ){
            state.list = res.data.list;
            state.total = res.data.total
        }
    })
}
getData()

interface User {
  date: string
  name: string
  address: string
}
const multipleSelection = ref<User[]>([])
//表格的选择按钮
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 是否可用按钮
const changeHandle=(row: TReason)=>{
    console.log(row);
    user
    .returnReasonUpdateApi( row.id, row.status )
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      // 如果请求失败，会走catch
      // 把 switch 恢复成之前的状态 -
      // 方式1
      row.status = row.status === 1 ? 0 : 1;
      //   方式二
      //   let target = state.tableData.find((item) => item.id === row.id);
      //   target && (target.status = row.status === 1 ? 0 : 1)
    });
}
// 控制子组件dialog显示和隐藏
const show = ref(false)
const hideDialog=()=>{
    show.value = false
    editId.value = 0;
}
// 添加按钮
const add=()=>{
    show.value = true
}
const editId = ref(0)
// 编辑按钮
const editHandle =(id: number)=>{
    editId.value = id;
    show.value = true;
}
// 删除按钮
const del=(id: number)=>{
    ElMessageBox.confirm(
        '是否要进行该删除操作',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
      // 把修改后的数据传给后台
      user.returnReasonDeleteApi(id).then(()=>{
        // 删除后刷新页面
        getData()
      })
    })
    .catch(() => {})
}


// 分页器
const currentChange =()=>{
    getData()
}
const pageSizeChagne =()=>{
    getData()
}

let {list,listParams,total,operate} = toRefs(state)
</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
    // 组件部分
    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item {
            flex: 33%;
        }
    }
    // 伪类生成器  解决弹性布局对不齐问题
    form::after {
            display: 'block';
            content: "";
            width: 33%;
        }

}
// 修改提交时间框的样式
.el-input__wrapper{
    width: 200px;
}
// 数据列表
.list{
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}

// 底下部分
.bottom{
    display: flex;
    justify-content: space-between;
    .left{
        display: flex;
        margin-top: 20px;
        .el-button{
            margin-left: 10px;
        }
    }
}
</style>